<template>
    <div class="detail-wrap">
        <web-header selectnum=-1></web-header>
        <div class="product-container">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item v-if="configObj.organzationShow" :to="{ path: '/product' }">贷款产品</el-breadcrumb-item>
                <el-breadcrumb-item>{{info.productName}}</el-breadcrumb-item>
            </el-breadcrumb>
            <div class="filter">
                <div class="title">{{info.productName}}<span>{{info.gmtCreated}}</span></div>
                <div @click.stop="applyBtn(info.id,info.productName)" :class="info.hadApply  == 'y'?'applyed':''" class="filter-btn f-btn">{{info.hadApply  == 'y'?'已申请':'申请'}}</div>
            </div>
            <div class="product-item">
                <div class="list-info">
                    <div style="overflow:hidden">
                        <div class="list-line over-hidden">
                            <div class="line-item"><span>贷款额度：</span>{{info.loanFundMin+' 万元'+' ~ '+info.loanFundMax+' 万元'}}</div>
                            <div class="line-item"><span>贷款最高期限：</span>{{info.investYearDesc}}</div>
                            <div class="line-item"><span>贷款年化利率：</span>{{info.minReportRate}}%/年</div>
                            <div class="line-item"><span>资金主体：</span>{{returnBody(info.fundBodyDatas)}}</div>
                        </div>
                        <div class="list-line">
                            <div class="line-item"><span>贷款适用地区：</span>{{returnArrName(info.areaDatas)}}</div>
                            <div class="line-item"><span>申请者最低成立年限：</span>{{info.applyMixYear + '年'}}</div>
                            <div class="line-item"><span>申请者盈利要求：</span>{{info.applyProfit == 'y'?'需盈利':'无要求'}}</div>
                            <div class="line-item"><span>申请者最低营业收入要求：</span>{{info.applyMixIncome?returnPrice(info.applyMixIncome):'无要求'}}</div>
                        </div>
                    </div>
                    <div class="line-item"><span>贷款产品详细说明：</span></div>
                    <div class="text-info" v-html="info.memo"></div>
                </div>     
            </div>
            <!-- <div class="bank-item" v-for="(item,index) in info.bankDatas" :key="index">
                <div class="line-item">资方：{{item.baseDTO.coreData.companyName}}</div>
                <div class="line-item"><span>成立时间：</span>{{item.baseDTO.coreData.gmtCreated}}</div>
                <div class="line-item"><span>注册资本：</span>{{item.baseDTO.coreData.regMoney}}</div>
                <div class="line-item"><span>企业类型：</span>{{item.baseDTO.coreData.thirdIndustryDesc}}</div>
            </div>
             -->
        </div>  
        <el-dialog
            :visible.sync="centerDialogVisible"
            width="30%"
            center>
            <div class="product-line">您将申请产品{{productName}},请确认</div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="centerDialogVisible = false">取 消</el-button>
                <el-button type="success" @click="confrimBtn">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog
            :visible.sync="centerDialogVisible1"
            width="30%"
            center>
            <div class="product-line">您还没有通过初审认证，请通过我的{{configObj.name}}提交初审认证后进行产品申请</div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="centerDialogVisible1 = false">取 消</el-button>
                <el-button type="success" @click="linkTo('/certificationList')">立即认证</el-button>
            </span>
        </el-dialog>
        <el-dialog
            :visible.sync="centerDialogVisible2"
            width="30%"
            center>
            <div class="product-line">您的公司信息尚未完善,还不能申请融资产品。请完善公司信息后回到本页或融资产品列表进行融资申请！</div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="centerDialogVisible2 = false">取 消</el-button>
                <el-button type="success" @click="linkTo('/companyEdit')">填写公司信息</el-button>
            </span>
        </el-dialog>
        <web-footer v-if="configObj.name == '创巢'" separatorshow=0></web-footer>
        <web-component-foot v-if="configObj.name != '创巢'"></web-component-foot>
    </div>
</template>

<script>
let CONSTANT = require('../../constant/constant.js'),
    common = require('../../common.js'),
    config = require('../../config/config.js')
export default {
    data() {
        return {
            id1:'',
            info:'',
            centerDialogVisible:false,
            productName:'',
            id:'',
            name:'',
            centerDialogVisible1:false,
            centerDialogVisible2:false,
            configObj:''
        }
    },
    components: {
        'web-header':() => import('../common/web-header'),
        'web-footer':() => import('../common/web-footer'),
        'web-component-foot':() => import('../common/web-component-foot')
    },  
    created() {
        let arr = location.hostname.split('.');
        let urlName = arr[0] == 'www'?arr[1]:arr[0];
        this.configObj = config.urlObjs[urlName]
    },
    mounted(){
        document.body.scrollTop = document.documentElement.scrollTop = 0;
        this.id1 = this.$router.currentRoute.query.id;
        this.getProductDetail()
         this.name = common.getCookie('nickname')
    },
    methods:{
        returnPrice(num){
            return common.returnNum(num)
        },
        returnArrName(arr){
            let arr1 = []
            arr.map( (item, index) => {
                let itemArea = "";
                if (item.financingProvinceName) {
                    itemArea = item.financingProvinceName
                }
                if (item.financingCityName) {
                    itemArea = item.financingProvinceName+item.financingCityName
                }
                if (item.financingDistrictName) {
                    itemArea = item.financingProvinceName+item.financingCityName+item.financingDistrictName
                }
               arr1.push(itemArea)
            })
            return arr1.join(';')
        },
        applyBtn(id,name){
            if(this.info.hadApply == 'y') return;
            let api = CONSTANT.URL.WEB.FINDLINCESTATE;
            common.requestAjax(api,{},{},(res)=>{
                    if(!res.data.bussData){
                        this.centerDialogVisible2 = true
                    }else{
                        this.findDuserCing(id)
                    }
                })
        },
        findDuserCing(id){
            let  url = CONSTANT.URL.SYSTEM.FINDUSERCANFINANCING,
                data = {},
                dataForm = {}
                common.requestAjax(url,JSON.stringify(data),dataForm,(res)=>{
                    if(!res.data.bussData){
                        this.centerDialogVisible1 = true;
                        return;
                    }
                    this.centerDialogVisible = false;
                    if(res.status == 200){
                        this.centerDialogVisible = true;
                        this.productName = name;
                        this.id = id;
                    }else{
                    }
                })
        },
        returnBody(data){
            let arr = []
            if(data&&data.length){
                data.map((item)=>{
                    arr.push(item.fundBodyDesc)
                })
            }
            
            return  arr.length?arr.join(','):'--'
        },
        linkTo(link){
           this.$router.push(link)
        },
        confrimBtn(){
            console.log(this.id)
                let  url = CONSTANT.URL.SYSTEM.APPLYPRODUCT,
                data = {productId:this.id},
                dataForm = {}
                common.requestAjax(url,JSON.stringify(data),dataForm,(res)=>{
                    this.centerDialogVisible = false;
                    if(res.status == 200){
                        this.$message({
                            message: '申请成功！',
                            type: 'success'
                        });
                        this.$router.push('ccOrderHand')
                    }else{
                        this.$message.error(res.msg);
                    }
                })
        },
        getProductDetail(){
            let url = CONSTANT.URL.WEB.FINDPRODUCTBYID,
                data = { },
                dataForm = {
                    id:this.id1
                }
                common.requestAjax(url,JSON.stringify(data),dataForm,(res)=>{
                if(res.status == 200){
                    let data = res.data;
                    this.info = data.bussData
                }
            })
        },
        loginOut() {
            common.setCookie('sessionId','')
            common.setCookie('nickname','')
            this.$nextTick(() => {
                this.$router.replace('/login')
            })
        }
    }
}
</script>

<style lang="scss">
.detail-wrap{
    .product-container{
        width: 1200px;
        margin: 0 auto;
        padding: 30px 0 72px;
        .filter{
            position: relative;
            margin: 49px 0 0px;
            border-bottom: 1px solid #f2f2f2;
            padding-bottom: 38px;
            .title{
                font-size: 18px;
                color: #111;
                font-weight: bold;
                span{
                    color: #999;
                    margin-left: 28px;
                    font-weight: normal;
                }
            }
            .filter-btn{
                position: absolute;
                right: 0;
                top: -10px;
                width: 100px;
                height: 40px;
                background-color: #ED7018;
                border-radius: 4px;
                -webkit-border-radius: 4px;
                font-size: 18px;
                color: #fff;
                text-align: center;
                line-height: 40px;
                cursor: pointer;
                &.applyed{
                    background-color: #909399;
                    cursor: inherit;
                    &:hover{
                        background-color: #909399;
                    }
                }
                &:hover{
                    background-color: #ED9000;
                    transition:all .2s linear
                }
            }
        }

        .product-item{
            margin-top: 9px;
            overflow: hidden;
            padding-bottom: 30px;
            border-bottom: 1px solid #f2f2f2;
            .list-info{
                position: relative;
                float: left;
                overflow: hidden;
                width: 100%;
                .date{
                    position: absolute;
                    right: 0;
                    top: 9px;
                    font-size: 14px;
                    color: #999;
                }
                .title{
                    font-size: 18px;
                    color: #111;
                    font-weight: bold;
                    
                }
                .list-line{
                    float: left;
                    width:38%;
                    &:last-child{
                        width: 52%;
                    }
                }
                .line-item{
                    margin-top: 21px;
                    font-size: 16px;
                    color: #111;
                    span{
                        font-weight: normal;
                        color: #666;
                    }
                }
                .text-info{
                    font-size: 16px;
                    color: #333;
                    width: 100%;
                    word-break: break-all; 
                    word-wrap: break-word;
                    line-height: 2;
                    white-space: pre-wrap;
                    margin-top: 19px;
                }
            }
        }
        .bank-item{
            padding-top: 35px;
            .line-item{
                margin-top: 21px;
                font-size: 16px;
                color: #333;
                span{
                    color: #666;
                }
            }  
        }
        .pagation-block{
            margin-top: 50px;
            .el-pagination{
                display: inline-block;
                margin-left: 40%;
                .number{
                    width: 40px;
                    height: 40px;
                    border-radius: 50%;
                    -webkit-border-radius: 50%;
                    text-align: center;
                    line-height: 40px;
                    color: #D1D1D1;
                    font-size: 16px;
                    border: 1px solid #D1D1D1;
                    margin-right: 15px;
                    &.active{
                        color: #333;
                    }
                }
                .el-icon.more{
                    width: 40px;
                    height: 40px;
                    border-radius: 50%;
                    -webkit-border-radius: 50%;
                    text-align: center;
                    line-height: 40px;
                    color: #D1D1D1;
                    border: 1px solid #D1D1D1;
                    margin-right: 15px;
                }
            }
        }
    }
}
</style>
